<include file="Public/min-header"/>
<link href="__PUBLIC__/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="__PUBLIC__/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<div class="wrapper">
    <include file="Public/breadcrumb"/>
    <section class="content ">
        <!-- Main content -->
        <div class="container-fluid">
            <div class="pull-right">
                <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default" data-original-title="返回"><i class="fa fa-reply"></i></a>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-list"></i> 添加广告</h3>
                </div>
                <div class="panel-body ">   
                    <!--表单数据-->
                    <form method="post" id="handleposition" action="{:U('Admin/Ad/adHandle')}">                    
                        <!--通用信息-->
                    <div class="tab-content col-md-10">                 	  
                        <div class="tab-pane active" id="tab_tongyong">                           
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <td class="col-sm-2">广告名称：</td>
                                    <td class="col-sm-8">
                                        <input type="text" class="form-control" name="ad_name" value="{$info.ad_name|default="自定义广告名称"}" >
                                        <span id="err_attr_name" style="color:#F00; display:none;"></span>                                        
                                    </td>
                                </tr>           
                                <tr>
                                    <td>广告类型：</td>
                                    <td>
                                        <select name="media_type" class="input-sm">
                                            <option value="0" <if condition="$info['media_type'] eq 0"> selected </if> >图片</option>                                             
                                            <option value="1" <if condition="$info['media_type'] eq 1"> selected </if> >视频</option>
                                        </select>                                
                                    </td>
                                </tr>  
                                <tr>
                                    <td>广告位置：</td>
                                    <td>
                                        <select name="pid" class="input-sm">
                                            <volist name="position" id="item">
                                                   <option value="{$item.position_id}" <if condition="$info[pid] eq $item[position_id]">selected</if>>{$item.position_name}</option>
                                           </volist>                  
                                        </select>      
                                    </td>
                                </tr>  
                                <tr>
                                    <td>开始日期：</td>
                                    <td>
                                        <fieldset>
                                        <div class="control-group">
                                                <div class="controls">
                                                        <div class="input-prepend input-group">
                                                                <span class="add-on input-group-addon">
                                                                        <i class="glyphicon glyphicon-calendar fa fa-calendar">
                                                                        </i>
                                                                </span>
                                                                <input type="text" style="width: 300px" name="begin" id="start_time" class="form-control" value='{$info.start_time|default="2016-01-01"}'>
                                                        </div>
                                                </div>
                                        </div>
                                        </fieldset>
                                    </td>
                                </tr>  
                                <tr>
                                    <td>结束时间：</td>
                                    <td>
                                        <fieldset>
                                            <div class="control-group">
                                                    <div class="controls">
                                                            <div class="input-prepend input-group">
                                                                    <span class="add-on input-group-addon">
                                                                            <i class="glyphicon glyphicon-calendar fa fa-calendar">
                                                                            </i>
                                                                    </span>
                                                                    <input type="text" style="width: 300px" name="end" id="end_time" class="form-control" value='{$info.end_time|default="2019-01-01"}'>
                                                            </div>
                                                    </div>
                                            </div>
                                            </fieldset>
                                    </td>
                                </tr>
                                <tr>
                                    <td>广告链接：</td>
                                    <td>
                                        <input type="text" class="form-control" name="ad_link" value="{$info.ad_link}" >
                                    </td>
                                </tr> 
                                <tr>
                                    <td>广告图片/视频：</td>
                                    <td>
                                        <input type="text" class="input-sm"  name="ad_code" id="ad_code" value="{$info.ad_code}"/>
                                        
                                        <div id="mediaCon">
                                            
                                            <if condition="$info['media_type'] eq 0">
                                 
                                                <a href="{$info['ad_code']}" target="_blank">
                                                    <img width="350" height="240" src="{$info['ad_code']}">
                                                </a> 
                                                                            
                                            <else/>
                                                <div class="col-sm-3">
                                                    <video id="video" width="350" height="240" controls>
                                                        <source src="{$info.ad_code}" type="video/mp4">
                                                    </video>
                                                </div>
                                            </if>
            
                                        </div>
                                        
                      					<div class="col-sm-3">
                                        	<!-- input type="button" class="btn btn-default" onClick="GetUploadify(1,'ad_code','ad','')"  value="上传广告"/> -->
                                            <input onclick="GetUploadify(1,'ad_code','ad');" type="button" class="btn btn-default" value="上传广告"/>
                                        </div>
                                    </td>
                                </tr>
                               <!--  <tr>
                                	<td>背景颜色：</td>
                                	<td> <input class="form-control" name="bgcolor" type="color" value="{$info.bgcolor}" style="width:200px;"/> </td>                              	
                                </tr> -->
                                <tr>
                                    <td>默认排序：</td>
                                    <td>
                                        <input type="text" class="input-sm" name="orderby" value="{$info.orderby}"  placeholder="50">
                                    </td>
                                </tr>
                                <tr>
                                    <td>是否有积分奖励：</td>
                                    <td>
                                        <input type="checkbox" class="input-sm" id="is_join_rebate_check" {$info['is_join_rebate']?'checked':''}>
                                        <input type="hidden" class="input-sm" id="is_join_rebate"  name="is_join_rebate" value="{$info.is_join_rebate}">
                                    </td>
                                </tr>
                                <tr>
                                    <td>观看/答题可获得积分(个)：</td>
                                    <td>
                                        <input type="text" class="input-sm" name="rebate" value="{$info.rebate}"  placeholder="积分奖励">
                                    </td>
                                </tr>
                                <tr>
                                    <td>参与回答问题的问题：</td>
                                    <td>
                                        <input type="text" class="input-sm" name="question" value="{$info.question}"  placeholder="">
                                    </td>
                                </tr>
                                <tr>
                                    <td>参与回答问题的答案：</td>
                                    <td>

                                        <volist name="info.answer.list" id="vo" key="k">
                                            <li class="answerList m-12">
                                                <input type="text" class="input-sm" name="answer[list][]" value="{$vo}"  placeholder="">
                                                <input type="radio" name="answer[selected]" value="{$k-1}" 
                                                <?php
                                                if(($k-1)==$info['answer']['selected'])
                                                { 
                                                    echo 'checked'; 
                                                } 
                                                ?>
                                                >选为答案
                                                <a class="btn btn-primary btn-xs addAnswer" title="添加答案"><i class="fa fa-plus"></i></a>
                                                <a class="btn btn-danger btn-xs delAnswer" title="删除答案"><i class="fa fa-trash-o"></i></a>
                                            </li>
                                        </volist>
                                        
                                        <empty name="info.answer">
                                            <li class="answerList m-12">
                                                <input type="text" class="input-sm" name="answer[list][]" value=""  placeholder="">
                                                <input type="radio" name="answer[selected]" value="0">选为答案
                                                <a class="btn btn-primary btn-xs addAnswer" title="添加答案"><i class="fa fa-plus"></i></a>
                                                <a class="btn btn-danger btn-xs delAnswer" title="删除答案"><i class="fa fa-trash-o"></i></a>
                                            </li>
                                        </empty>

                                    </td>
                                </tr>
                                </tbody> 
                                <tfoot>
                                	<tr>
                                	<td><input type="hidden" name="act" value="{$act}">
                                        <input type="hidden" name="ad_id" value="{$info.ad_id}">
                                	</td>
                                	<td class="text-right"><input class="btn btn-primary" type="button" onclick="adsubmit()" value="保存"></td></tr>
                                </tfoot>                               
                            </table>
                        </div>                           
                    </div>              
			    	</form><!--表单数据-->
                </div>
            </div>
        </div>
    </section>
</div>

<style type="text/css">
    .answerList{
        list-style: none;
    }
</style>

<script>
function adsubmit(){
    var length = $(".answerList").length || 0;
    var is_join_rebate = $("#is_join_rebate").val();
    if(is_join_rebate==1&&length<2)
    {
        return alert("答案不能只有一个");
    }
	$('#handleposition').submit();
}
// 监听上传完成
$("#ad_code").on("change",function(){
    var url = $(this).val();
    var media_type = $("*[name=media_type]");
    var mediaCon = $("#mediaCon");
    var html = "";
    if( !/.*?[\.mp4|\.mov\.flv|\.f4v|\.avi]$/.test(url) )
    {
        media_type.val(0);
        html = '&nbsp;&nbsp;\
        <a target="_blank" href="'+url+'">\
        <img width="350" height="240" src="'+url+'">\
        </a>';
    }else{
        media_type.val(1);
        html='<div class="col-sm-3">\
        <video id="video" width="350" height="240" controls>\
        <source src="'+url+'" type="video/mp4">\
        </video>\
        </div>';
    }
    mediaCon.html(html);
})

$(document).ready(function() {

    $("#is_join_rebate_check").on("change",function(){
        $("#is_join_rebate").val($(this).is(":checked")?1:0);
    });

	$('#start_time').daterangepicker({
		format:"YYYY-MM-DD",
		singleDatePicker: true,
		showDropdowns: true,
		minDate:'2016-01-01',
		maxDate:'2030-01-01',
		startDate:'2016-01-01',
	    locale : {
            applyLabel : '确定',
            cancelLabel : '取消',
            fromLabel : '起始时间',
            toLabel : '结束时间',
            customRangeLabel : '自定义',
            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
            firstDay : 1
        }
	});
	
	$('#end_time').daterangepicker({
		format:"YYYY-MM-DD",
		singleDatePicker: true,
		showDropdowns: true,
		minDate:'2016-01-01',
		maxDate:'2030-01-01',
		startDate:'2016-01-01',
		/*
        startDate: moment().startOf('day'),
        endDate: moment(),
        minDate: '01/01/2014',    //最小时间
        maxDate : moment(), //最大时间
        dateLimit : {
            days : 30
        }, //起止时间的最大间隔
        showDropdowns : true,
        showWeekNumbers : false, //是否显示第几周
        timePicker : true, //是否显示小时和分钟
        timePickerIncrement : 60, //时间的增量，单位为分钟
        timePicker12Hour : false, //是否使用12小时制来显示时间
        ranges : {
            '最近1小时': [moment().subtract('hours',1), moment()],
            '今日': [moment().startOf('day'), moment()],
            '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
            '最近7日': [moment().subtract('days', 6), moment()],
            '最近30日': [moment().subtract('days', 29), moment()]
        },
        opens : 'right', //日期选择框的弹出位置
        buttonClasses : [ 'btn btn-default' ],
        applyClass : 'btn-small btn-primary blue',
        cancelClass : 'btn-small',
        format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
        separator : ' to ',
        */
	    locale : {
            applyLabel : '确定',
            cancelLabel : '取消',
            fromLabel : '起始时间',
            toLabel : '结束时间',
            customRangeLabel : '自定义',
            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
            firstDay : 1
        }
	});

    // 答案添加选项
    $(document).on("click",".addAnswer",function(e){
        var length = $(".answerList").length || 0;
        var html = '<li class="answerList m-12">\
                        <input type="text" class="input-sm" name="answer[list][]" value=""  placeholder="">\
                        <input type="radio" name="answer[selected]" value="'+length+'">选为答案\
                        <a class="btn btn-primary btn-xs addAnswer" title="添加答案"><i class="fa fa-plus"></i></a>\
                        <a class="btn btn-danger btn-xs delAnswer" title="删除答案"><i class="fa fa-trash-o"></i></a>\
                    </li>';
        for (var i = 0; i < $(".answerList").length; i++) 
        {
           $($(".answerList")[i]).find('input[name=answer\\[selected\\]]').val(i);
        }

        $(html).insertAfter($(this).parent());
    });

    // 答案删除选项
    $(document).on("click",".delAnswer",function(e){
        var length = $(".answerList").length || 0;
        var selected = $('input[name=answer\\[selected\\]]').val();
        console.log("selected",selected);
        if(length<2)
        {

            $(this).siblings('input')[0].value = '';
            $(this).siblings('input')[1].removeAttribute("checked", '');
            return false;
        }
        $(this).parent().remove();
    });

});

</script>
 </body>
 </html>